import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { Row, Col, InputNumber, Button, Divider } from 'antd'
import arcpayLogo from '../../assets/arcpay.jpg'
import album from '../../assets/album.jpeg'
import Modal from './Modal'
import './index.less'

const pageTitle = 'ArcPay'

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.handleCancel = this.handleCancel.bind(this)
    this.handlePay = this.handlePay.bind(this)
    this.state = {
      showModal: false,
    }
  }

  componentDidMount() { }

  componentWillReceiveProps(nextProps) { }

  handleCancel() {
    this.setState({
      ...this.state,
      showModal: false,
    })
  }

  handlePay() {
    this.setState({
      ...this.state,
      showModal: true,
    })
  }

  render() {
    return (
      <div className='demo-page'>
        <div className='header'>
          <div className='container'>
            <img src={arcpayLogo} alt='arcpay' />
            <div className='text'>
              <h1>ArcPay</h1>
              <h2>Demo</h2>
            </div>
          </div>
        </div>
        <div className='container headline'>
          <h1>Create Your Crypto Payment Widget</h1>
          <h2>Receive BTC / ETH for Your Online Store</h2>
        </div>
        <div className='container'>
          <div className='card'>
            <div className='shop'>Demo Online Album Shop</div>
            <Row type='flex' gutter={48} className='album'>
              <Col xs={14}>
                <img src={album} alt='item' />
              </Col>
              <Col xs={10}>
                <div className='title'>"Divide" Album</div>
                <Divider />
                <Row className='item' type='flex' align='middle'>
                  <Col xs={6} className='desc'>Artist</Col>
                  <Col xs={18} className='content'>Ed Sheeran</Col>
                </Row>
                <Row className='item' type='flex' align='middle'>
                  <Col xs={6} className='desc'>Price</Col>
                  <Col xs={18} className='content'>RMB 10</Col>
                </Row>
                <Row className='item' type='flex' align='middle'>
                  <Col xs={6} className='desc'>Quantity</Col>
                  <Col xs={18} className='content'><InputNumber value={1} /></Col>
                </Row>
                <Divider />
                <div className='pay-desc'>
                  <p>Crypto Payment</p>
                </div>
                <Button onClick={this.handlePay} type='primary' size='large'>Pay with ArcPay</Button>
              </Col>
            </Row>
          </div>
        </div>
        <Modal
          visible={this.state.showModal}
          footer={null}
          onCancel={this.handleCancel}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {}
}

const mapDispatchToProps = dispatch => ({})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Demo))
